import React, { useState } from 'react';
import TextToSpeech from '../../components/TextToSpeech';
import { Button, Card, Typography, Space, Divider, Alert } from 'antd';
import { SoundOutlined, BookOutlined, BulbOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

const TextToSpeechDemo: React.FC = () => {
  const [currentText, setCurrentText] = useState('');

  // 预设的示例文本
  const sampleTexts = [
    {
      title: '欢迎语',
      text: '欢迎使用文字转语音功能！这是一个基于Web Speech API的语音合成工具，可以将文字转换为自然语音。'
    },
    {
      title: '新闻播报',
      text: '今日天气晴朗，温度适宜。据气象部门预报，未来三天将持续晴好天气，适合户外活动。'
    },
    {
      title: '故事朗读',
      text: '从前有座山，山里有座庙，庙里有个老和尚在讲故事。讲的是什么呢？讲的是从前有座山...'
    },
    {
      title: '技术介绍',
      text: 'Web Speech API是浏览器原生支持的语音识别和语音合成技术，无需额外插件即可实现文字转语音功能。'
    }
  ];

  return (
    <div style={{ 
      padding: '24px', 
      maxWidth: '1200px', 
      margin: '0 auto',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      minHeight: '100vh'
    }}>
      <div style={{ 
        background: 'rgba(255, 255, 255, 0.95)', 
        borderRadius: '16px', 
        padding: '32px',
        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)'
      }}>
        {/* 页面标题 */}
        <div style={{ textAlign: 'center', marginBottom: '32px' }}>
          <Title level={1} style={{ color: '#1a1a2e', marginBottom: '8px' }}>
            <SoundOutlined style={{ marginRight: '12px', color: '#667eea' }} />
            文字转语音演示
          </Title>
          <Paragraph style={{ fontSize: '16px', color: '#666' }}>
            基于Web Speech API的智能语音合成系统
          </Paragraph>
        </div>

        {/* 功能说明 */}
        <Alert
          message="功能特性"
          description={
            <ul style={{ margin: 0, paddingLeft: '20px' }}>
              <li>支持多种语音和语言选择</li>
              <li>可调节语速、音调、音量</li>
              <li>支持暂停、继续、停止播放</li>
              <li>实时状态显示和错误处理</li>
              <li>响应式设计，支持移动端</li>
            </ul>
          }
          type="info"
          showIcon
          style={{ marginBottom: '24px' }}
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
          {/* 主要功能区域 */}
          <div>
            <Card 
              title={
                <span>
                  <BookOutlined style={{ marginRight: '8px', color: '#667eea' }} />
                  文字转语音
                </span>
              }
              style={{ height: 'fit-content' }}
            >
              <TextToSpeech 
                text={currentText}
                onSpeakStart={() => console.log('开始播放')}
                onSpeakEnd={() => console.log('播放结束')}
                onSpeakError={(error) => console.error('播放错误:', error)}
              />
            </Card>
          </div>

          {/* 示例文本区域 */}
          <div>
            <Card 
              title={
                <span>
                  <BulbOutlined style={{ marginRight: '8px', color: '#667eea' }} />
                  示例文本
                </span>
              }
            >
              <Space direction="vertical" style={{ width: '100%' }}>
                {sampleTexts.map((sample, index) => (
                  <div key={index}>
                    <Button
                      type="primary"
                      ghost
                      block
                      onClick={() => setCurrentText(sample.text)}
                      style={{ 
                        textAlign: 'left',
                        height: 'auto',
                        padding: '12px 16px',
                        whiteSpace: 'normal',
                        lineHeight: '1.4'
                      }}
                    >
                      <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                        {sample.title}
                      </div>
                      <div style={{ 
                        fontSize: '12px', 
                        color: 'rgba(255, 255, 255, 0.8)',
                        lineHeight: '1.3'
                      }}>
                        {sample.text.length > 50 
                          ? sample.text.substring(0, 50) + '...' 
                          : sample.text
                        }
                      </div>
                    </Button>
                  </div>
                ))}
              </Space>

              <Divider />

              <div>
                <Text strong>使用说明：</Text>
                <Paragraph style={{ fontSize: '13px', color: '#666' }}>
                  1. 点击示例文本按钮，文本会自动填入转换区域<br/>
                  2. 在文本框中输入或修改要转换的文字<br/>
                  3. 点击播放按钮开始语音合成<br/>
                  4. 使用设置按钮调整语音参数
                </Paragraph>
              </div>
            </Card>
          </div>
        </div>

        {/* 技术说明 */}
        <Card 
          title="技术实现" 
          style={{ marginTop: '24px' }}
        >
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}>
            <div>
              <Title level={4}>Web Speech API</Title>
              <Paragraph>
                Web Speech API是浏览器原生支持的语音技术，包括：
              </Paragraph>
              <ul>
                <li>Speech Synthesis（语音合成）</li>
                <li>Speech Recognition（语音识别）</li>
                <li>支持多种语言和语音</li>
                <li>无需额外插件或服务</li>
              </ul>
            </div>

            <div>
              <Title level={4}>功能特性</Title>
              <Paragraph>
                本组件实现了以下功能：
              </Paragraph>
              <ul>
                <li>实时语音合成</li>
                <li>语音参数调节</li>
                <li>播放状态控制</li>
                <li>错误处理和反馈</li>
                <li>响应式UI设计</li>
              </ul>
            </div>

            <div>
              <Title level={4}>浏览器兼容性</Title>
              <Paragraph>
                支持所有现代浏览器：
              </Paragraph>
              <ul>
                <li>Chrome 33+</li>
                <li>Firefox 49+</li>
                <li>Safari 7+</li>
                <li>Edge 14+</li>
              </ul>
            </div>
          </div>
        </Card>

        {/* 注意事项 */}
        <Alert
          message="注意事项"
          description="请确保浏览器支持Web Speech API，并且允许网站使用音频功能。某些浏览器可能需要用户交互才能开始播放音频。"
          type="warning"
          showIcon
          style={{ marginTop: '24px' }}
        />
      </div>
    </div>
  );
};

export default TextToSpeechDemo; 